Questo modulo passa da percorsi statici a strumenti dinamici basati su eventi manipolando il CanvasRenderingContext2D stato. Ci concentriamo sull'estensione delle capacità dell'applicazione tramite modelli di ordine superiore e filtraggio matematico.

1. Modelli di strumenti di ordine superiore

Strumenti come tools.Line astraggono gli eventi del mouse usando helper come trackDrag. Al contrario, tools.Spray implementa ripetizione basata su intervalli tramite setInterval, consentendo un posizionamento continuo dei pixel mentre il mouse è premuto.

2. Vincoli matematici

Un semplice offset casuale crea una distribuzione quadrata. Per ottenere un effetto naturale di pennello circolare, usiamo il teorema di Pitagora per filtrare i punti: $x^2 + y^2 < r^2$. In alternativa, si potrebbe usare la coordinata polare con Math.sin e Math.cos per la conversione.

3. Operazioni composite e stato

Oltre i tratti standard, la proprietà globalCompositeOperation definisce come i nuovi pixel interagiscano con quelli esistenti. Ad esempio, impostandolo su 'destination-out' consente allo tools.Erase funzione di rendere i pixel trasparenti invece di dipingerli semplicemente di bianco. Controlli UI come controls.color e controls.brushSize forniscono aggiornamenti in tempo reale a fillStyle e lineWidth rispettivamente.